<template>
  <div class="articleIntroduction">
    <div class="title">{{ article.title }}</div>
    <div class="sub">
      <div v-for="(categorie, index) in article.categories" :key="index">
        {{ categorie.category_name }}-{{ categorie.sub.category_name }}
      </div>
      <div>
        {{ article.publish_time | timestampToTime }}&nbsp;·&nbsp;{{
          article.ip_location
        }}
      </div>
      <div>{{ article.count.count_view | formatter }}次播放</div>
    </div>
    <div
      ref="content"
      v-if="article.content"
      class="content"
      :class="{ allContent: !needShowAllContent }"
    >
      {{ article.content }}
      <div
        v-if="needShowAllContent"
        class="showAllContent"
        @click="showAllContent"
      >
        展开
      </div>
    </div>
    <div class="functions">
      <div class="function" @click.stop="doLike">
        <svg
          v-show="!isLike"
          t="1677204147051"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3623"
          width="32"
          height="32"
        >
          <path
            d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
            fill="#000000"
            p-id="3624"
          ></path>
        </svg>
        <svg
          v-show="isLike"
          t="1677497067881"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7326"
          width="32"
          height="32"
        >
          <path
            d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
            fill="#ff0000"
            p-id="7327"
          ></path>
        </svg>
        <div class="num" :class="{ like: isLike }">
          {{ likeNum | formatter }}
        </div>
      </div>
      <div class="function" @click.stop="doCollect">
        <svg
          v-if="!isCollect"
          t="1677204249032"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5593"
          width="32"
          height="32"
        >
          <path
            d="M769.097 935.636c-4.457 0-8.93-1.063-13.026-3.216L512 804.104 267.93 932.42a28 28 0 0 1-40.627-29.518l46.614-271.776L76.46 438.653a27.999 27.999 0 0 1 15.519-47.76l272.878-39.651 122.035-247.27a27.998 27.998 0 0 1 50.216 0l122.035 247.27 272.878 39.651a28.002 28.002 0 0 1 15.518 47.76L750.083 631.126l46.613 271.776a28 28 0 0 1-27.599 32.734zM512 744.47c4.476 0 8.951 1.072 13.029 3.216l206.883 108.766-39.511-230.367a27.995 27.995 0 0 1 8.053-24.784l167.37-163.146-231.301-33.61a27.998 27.998 0 0 1-21.082-15.317L512 179.632 408.559 389.227a28 28 0 0 1-21.082 15.317l-231.301 33.61L323.547 601.3a28.004 28.004 0 0 1 8.053 24.784l-39.511 230.367L498.97 747.686A27.99 27.99 0 0 1 512 744.47z"
            p-id="5594"
            fill="#000000"
          ></path>
        </svg>
        <svg
          v-else
          t="1677204249032"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5593"
          width="32"
          height="32"
        >
          <path
            d="M769.097 935.636c-4.457 0-8.93-1.063-13.026-3.216L512 804.104 267.93 932.42a28 28 0 0 1-40.627-29.518l46.614-271.776L76.46 438.653a27.999 27.999 0 0 1 15.519-47.76l272.878-39.651 122.035-247.27a27.998 27.998 0 0 1 50.216 0l122.035 247.27 272.878 39.651a28.002 28.002 0 0 1 15.518 47.76L750.083 631.126l46.613 271.776a28 28 0 0 1-27.599 32.734zM512 744.47c4.476 0 8.951 1.072 13.029 3.216l206.883 108.766-39.511-230.367a27.995 27.995 0 0 1 8.053-24.784l167.37-163.146-231.301-33.61a27.998 27.998 0 0 1-21.082-15.317L512 179.632 408.559 389.227a28 28 0 0 1-21.082 15.317l-231.301 33.61L323.547 601.3a28.004 28.004 0 0 1 8.053 24.784l-39.511 230.367L498.97 747.686A27.99 27.99 0 0 1 512 744.47z"
            p-id="5594"
            fill="#fdb828"
          ></path>
        </svg>
        <div class="num" :class="{ collect: isCollect }">
          {{ collectNum | formatter }}
        </div>
      </div>
      <div class="function" @click.stop="share">
        <svg
          t="1677204297186"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7623"
          width="32"
          height="32"
        >
          <path
            d="M889.08288 66.56h-307.5584v58.26048h285.21472L353.40288 640.44032l39.77216 39.92576 506.14272-508.48768v271.59552H957.44v-308.3776C957.44 97.24416 926.83264 66.56 889.08288 66.56z"
            fill="#000000"
            p-id="7624"
          ></path>
          <path
            d="M896.96256 899.17952H124.67712V124.82048h317.7984V66.56H134.90688C97.16224 66.56 66.56 97.24416 66.56 135.0912v753.82272C66.56 926.76096 97.16224 957.44 134.90688 957.44H886.7328c37.74464 0 68.35712-30.67904 68.35712-68.52608v-308.38272h-58.12736V899.17952z"
            fill="#000000"
            p-id="7625"
          ></path>
        </svg>
        <div class="num">{{ article.count.count_share | formatter }}</div>
      </div>
      <div class="function" v-if="article.allow_download_type == 3">
        <svg
          t="1677204421155"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9641"
          width="32"
          height="32"
        >
          <path
            d="M490.45 757.79l0.36 0.34c0.25 0.24 0.5 0.48 0.75 0.71l0.07 0.06 0.51 0.44 0.6 0.51 0.12 0.1 0.59 0.46 0.51 0.39 0.17 0.13 0.63 0.44 0.46 0.32 0.22 0.15 0.64 0.4 0.46 0.29 0.25 0.15 0.62 0.34 0.5 0.28 0.26 0.14 0.58 0.29 0.57 0.28 0.25 0.12 0.54 0.23 0.67 0.29 0.23 0.1 0.49 0.18 0.77 0.29 0.19 0.07 0.45 0.14 0.86 0.28 0.16 0.05 0.42 0.11 0.94 0.25h0.13l0.41 0.09 1 0.21h0.11l0.45 0.08 1 0.16h0.1l0.54 0.06 0.9 0.11h0.08l0.76 0.05 0.72 0.05H514.69l0.77-0.06 0.7-0.05h0.09l0.93-0.11 0.51-0.06h0.1l1-0.17 0.42-0.07h0.11l1-0.22 0.39-0.09h0.13l1-0.26 0.4-0.11h0.15l0.89-0.29 0.44-0.14 0.18-0.07 0.79-0.3 0.49-0.19 0.21-0.09 0.67-0.29 0.56-0.24 0.23-0.11 0.56-0.28 0.62-0.31 0.23-0.13 0.47-0.27 0.67-0.38 0.22-0.14 0.42-0.26 0.71-0.45 0.19-0.13 0.39-0.28 0.73-0.51 0.14-0.11 0.43-0.33 0.71-0.55 0.09-0.08 0.56-0.48 0.59-0.51q0.58-0.53 1.13-1.08l188.95-190a32 32 0 0 0-45.38-45.13L544.86 657.64 544 126.93A32 32 0 0 0 512 95h-0.05A32 32 0 0 0 480 127l0.87 531.1L344 522.33a32 32 0 0 0-45.07 45.44z"
            fill="#000000"
            p-id="9642"
          ></path>
          <path
            d="M927.75 605a32 32 0 0 0-32 32v224h-767.5V637a32 32 0 0 0-64 0v256a32 32 0 0 0 32 32h831.5a32 32 0 0 0 32-32V637a32 32 0 0 0-32-32z"
            fill="#000000"
            p-id="9643"
          ></path>
        </svg>
        <div class="num">下载</div>
      </div>
    </div>
    <div class="tagsBox">
      <div class="tags" :class="{ allTags: isShowAllTags }">
        <div
          class="tag"
          v-for="(tag, index) in article.tags"
          :key="index"
          @click.stop="toSearched(tag.name)"
        >
          {{ tag.name }}
        </div>
      </div>
      <div
        v-if="article.tags.length > 4"
        class="showAllTags"
        @click="showAllTags"
      >
        <van-icon
          v-if="!isShowAllTags"
          name="arrow-down"
          size="16"
          color="#999"
        />
        <van-icon v-else name="arrow-up" size="16" color="#999" />
      </div>
    </div>
    <div
      class="team"
      v-if="
        (article.author.userinfo.is_realname_auth ||
          article.author.userinfo.sex != 2) &&
        !article.author.userinfo.is_vmovier_migrate_user
      "
    >
      <div class="creator">创作人</div>
      <div class="userinfos" v-if="article.team_user_count > 0">
        <div class="userinfo" @click.stop="toUser(article.author.userinfo.id)">
          <div class="left">
            <div class="avatar">
              <van-image
                width="50"
                height="50"
                lazy-load
                round
                :src="article.author.userinfo.avatar"
              />
            </div>
            <div class="nameBox">
              <div class="username">{{ article.author.userinfo.username }}</div>
              <div class="roles">{{ article.author.role }}</div>
            </div>
          </div>
          <div
            v-if="!isFollow"
            class="follow"
            @click.stop="follow(article.userid)"
          >
            关注
          </div>
          <div v-else class="unfollow" @click.stop="unfollow(article.userid)">
            已关注
          </div>
        </div>
        <TeamMember
          v-for="(member, index) in article.team"
          :key="index"
          :member="member"
        />
      </div>
      <div class="userinfos" v-else>
        <div class="userinfo" @click.stop="toUser(article.author.userinfo.id)">
          <div class="left">
            <div class="avatar">
              <van-image
                width="50"
                height="50"
                lazy-load
                round
                :src="article.author.userinfo.avatar"
              />
            </div>
            <div class="nameBox">
              <div class="username">{{ article.author.userinfo.username }}</div>
              <div class="roles">{{ article.author.role }}</div>
            </div>
          </div>
          <div
            v-if="!isFollow"
            class="follow"
            @click.stop="follow(article.userid)"
          >
            关注
          </div>
          <div v-else class="unfollow" @click.stop="unfollow(article.userid)">
            已关注
          </div>
        </div>
      </div>
    </div>
    <div class="similarVideoBox">
      <div class="similarVideoTitle">相似视频</div>
      <div class="similarVideos">
        <SimpleVideo
          v-for="similarVideo in similarVideos"
          :key="similarVideo.id"
          :videoInfo="similarVideo"
        />
        <!-- <SimpleVideo
          v-for="(similarVideo, index) in similarVideos"
          :key="index"
          :videoInfo="similarVideo"
        /> -->
      </div>
    </div>
    <van-action-sheet
      v-if="nsCollects.length > 0"
      v-model="show"
      :title="isAdding ? '新建收藏夹' : '选择收藏夹'"
      class="sheet"
      :closeable="false"
      :cancel-text="isAdding ? '' : '确认'"
      @cancel="onCancel"
      @close="isAdding = false"
    >
      <div v-if="!isAdding" class="add" @click.stop="addCollect">
        +&nbsp;新建
      </div>
      <div v-else class="addOk" @click.stop="addCollectOk">完成</div>
      <div class="close" @click.stop="show = false">
        <van-icon name="cross" size="22" color="#000" />
      </div>
      <van-checkbox-group v-model="result">
        <van-cell-group v-if="!isAdding">
          <van-cell
            v-for="(collect, index) in nsCollects"
            clickable
            :key="index"
            :title="collect.title"
            @click.stop="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="index" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group v-else>
          <van-cell>
            <input
              class="input"
              type="text"
              placeholder="请输入收藏夹的名称，最多20字"
              v-model="addCollectName"
            />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-action-sheet>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import SimpleVideo from "@/components/SimpleVideo.vue";
import TeamMember from "@/components/TeamMember.vue";

export default {
  // name: "ArticleIntroduction",
  components: {
    SimpleVideo,
    TeamMember,
  },
  props: ["article"],
  data() {
    return {
      isShowAllTags: false,
      needShowAllContent: false,
      similarVideos: null,
      isFollow: false,
      likeNum: 0,
      isLike: false,
      nsCollects: [],
      collectNum: 0,
      isCollect: false,
      show: false,
      result: [],
      isAdding: false,
      addCollectName: "",
    };
  },
  created() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 0,
    });
    let url;
    if (this.$route.query.id == 10510172 || this.$route.query.id == 11704000) {
      url = `/${this.$route.query.id}like.json`;
    } else {
      url = `https://apis.netstart.cn/xpc/article/${this.$route.query.id}/next`;
    }
    this.$axios.get(url).then((res) => {
      // console.log(res.data.data);
      this.similarVideos = res.data.data.list;
      this.$toast.clear();
    });
    this.likeNum = this.article.count.count_like;
    this.collectNum = this.article.count.count_collect;
  },
  mounted() {
    // console.log(this.$refs.content);
    if (this.$refs.content) {
      if (this.$refs.content.clientHeight > 72) {
        this.needShowAllContent = true;
      }
    }

    if (localStorage.getItem("nsMine")) {
      let follows = JSON.parse(localStorage.getItem("follows") || "[]");
      // console.log(follows.indexOf(this.article.author.userinfo.id));
      if (follows.indexOf(this.article.author.userinfo.id) != -1) {
        this.isFollow = true;
      } else {
        this.isFollow = false;
      }

      let likes = JSON.parse(localStorage.getItem("nsLikes") || "[]");
      // console.log(follows.indexOf(this.article.author.userinfo.id));
      if (likes.indexOf(this.article.id) != -1) {
        this.isLike = true;
        this.likeNum++;
      } else {
        this.isLike = false;
      }

      this.nsCollects = JSON.parse(
        localStorage.getItem("nsCollects") ||
          `[{"title":"默认收藏夹","list":[]}]`
      );
      // console.log(
      //   collects
      //     .map((o) => {
      //       return o.list.indexOf(this.article.id) != -1;
      //     })
      //     .indexOf(true) != -1
      // );
      let collectArr = this.nsCollects.map((o) => {
        return o.list.map((i) => i.id == this.article.id).indexOf(true) != -1;
      });
      // console.log(collectArr);
      for (let i in collectArr) {
        if (collectArr[i]) {
          this.result.push(Number(i));
        }
      }
      if (collectArr.indexOf(true) != -1) {
        this.isCollect = true;
        this.collectNum++;
      } else {
        this.isCollect = false;
      }
    }
  },
  methods: {
    addCollectOk() {
      if (this.addCollectName && this.addCollectName != "默认收藏夹") {
        this.nsCollects = [
          ...this.nsCollects,
          { title: this.addCollectName, list: [] },
        ];
        localStorage.setItem("nsCollects", JSON.stringify(this.nsCollects));
        this.isAdding = false;
        this.addCollectName = "";
        this.$toast("创建成功");
      } else {
        this.$toast("请输入收藏夹名称");
      }
    },
    addCollect() {
      this.isAdding = true;
    },
    onCancel() {
      let canDo = false;
      let collectArr = this.nsCollects.map((o) => {
        return o.list.map((i) => i.id == this.article.id).indexOf(true) != -1;
      });
      // console.log(collectArr);
      for (let i of this.result) {
        collectArr[i] = !collectArr[i];
      }
      // console.log(collectArr);
      for (let i in collectArr) {
        if (collectArr[i]) {
          canDo = true;
        }
      }
      // console.log(canDo);
      if (canDo) {
        let changeArr = Array(this.nsCollects.length).fill(false);
        for (let i of this.result) {
          changeArr[i] = true;
        }
        // console.log(changeArr);
        for (let i in changeArr) {
          // console.log(collectArr[i]);
          if (changeArr[i]) {
            // continue;
            if (
              this.nsCollects[i].list
                .map((o) => o.id == this.article.id)
                .indexOf(true) == -1
            ) {
              this.nsCollects[i].list.unshift(this.article);
            }
          } else {
            this.nsCollects[i].list = this.nsCollects[i].list.filter((o) => {
              return o.id != this.article.id;
            });
          }
        }
        // console.log(this.nsCollects);
        localStorage.setItem("nsCollects", JSON.stringify(this.nsCollects));
        if (changeArr.indexOf(true) != -1) {
          this.isCollect = true;
        } else {
          this.isCollect = false;
        }
        this.$toast("操作成功");
      }
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    showAllContent() {
      this.needShowAllContent = false;
    },
    showAllTags() {
      this.isShowAllTags = !this.isShowAllTags;
    },
    follow(id) {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        // console.log(id);
        let follows = JSON.parse(localStorage.getItem("follows") || "[]");
        follows.unshift(id);
        localStorage.setItem("follows", JSON.stringify(follows));
        this.isFollow = true;
        this.$toast("关注成功");
      }
    },
    unfollow(id) {
      this.$dialog
        .confirm({
          message: "确定要取消关注TA吗？",
        })
        .then(() => {
          // on confirm
          // console.log(id);
          let follows = JSON.parse(
            localStorage.getItem("follows") || "[]"
          ).filter((o) => o != id);
          localStorage.setItem("follows", JSON.stringify(follows));
          this.isFollow = false;
          this.$toast("取消关注成功");
        })
        .catch(() => {
          // on cancel
        });
    },
    toUser(id) {
      this.$router.push({
        path: "/user",
        query: { userid: id },
      });
    },
    doLike() {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        // console.log("doLike");
        let likes = JSON.parse(localStorage.getItem("nsLikes") || "[]");
        if (!this.isLike) {
          this.likeNum++;
          likes.unshift(this.article.id);
        } else {
          this.likeNum--;
          likes = likes.filter((o) => o != this.article.id);
        }
        localStorage.setItem("nsLikes", JSON.stringify(likes));

        this.isLike = !this.isLike;
      }
    },
    doCollect() {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        this.show = true;
      }
    },
    toSearched(kw) {
      this.$router.push({
        path: "/searched",
        query: { kw },
      });
    },
    ...mapMutations(["changeShare"]),
    share() {
      // console.log("share");
      this.changeShare();
    },
    onSelect(option) {
      this.$toast(option.name);
      this.showShare = false;
    },
  },
  filters: {
    timestampToTime: function (timestamp) {
      if (timestamp === 0 || timestamp == null) {
        return "";
      } else {
        var date = new Date(timestamp * 1000);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return Y + M + D;
      }
    },
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.articleIntroduction {
  padding-top: 15px;
  height: 397px;
  overflow-y: scroll;

  .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
    padding: 0 24px;
  }

  .sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
    padding: 0 24px;

    > div {
      margin-right: 10px;
      height: 22px;
      line-height: 22px;
    }
  }

  .content {
    font-size: 12px;
    position: relative;
    margin-bottom: 8px;
    padding: 0 24px;
    white-space: pre-wrap;
    line-height: 18px;
    height: 72px;
    overflow: hidden;

    .showAllContent {
      position: absolute;
      right: 25px;
      bottom: 1px;
      font-size: 13px;
      color: red;
      background-color: white;
      box-shadow: -7px 0px 10px white;
    }
  }

  .allContent {
    height: auto !important;
  }

  .functions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 35px;

    .function {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .icon {
        width: 25px;
        height: 25px;
        margin-bottom: 5px;
      }

      .num {
        font-size: 12px;
      }

      .like {
        color: red;
      }

      .collect {
        color: #fdb828;
      }
    }
  }

  .tagsBox {
    border-top: 1px solid #f7f7f7;
    border-bottom: 1px solid #f7f7f7;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    padding: 10px 24px;
    padding-bottom: 0;

    .tags {
      display: flex;
      flex-wrap: wrap;
      width: 308px;
      height: 36px;
      overflow: hidden;

      .tag {
        font-size: 12px;
        background-color: #f7f7f7;
        padding: 5px 12px;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
      }
    }

    .allTags {
      height: auto !important;
    }

    .showAllTags {
      width: 16px;
      height: 26px;
      line-height: 26px;
      // align-self: center;
    }
  }

  .team {
    border-bottom: 1px solid #f7f7f7;
    padding: 5px 24px 15px;
    overflow: hidden;

    .creator {
      font-size: 18px;
      font-weight: bold;
      padding: 5px;
      margin-bottom: 10px;
    }

    .userinfos {
      display: flex;
      align-items: center;
      overflow-x: scroll;
      height: 90px;
      padding-left: 10px;

      .userinfo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        box-shadow: 2px 1px 5px 0px #dbdbdb;
        border-radius: 10px;
        width: 255px;
        margin-right: 20px;

        .left {
          display: flex;
          align-items: center;

          .avatar {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 1px solid #f7f7f7;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 8px;
          }

          .nameBox {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 110px;
            margin-right: 20px;

            .username {
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 5px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .roles {
              font-size: 12px;
              color: #999;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        .follow {
          width: 64px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          border-radius: 15px;
          font-size: 14px;
          background-color: #fdefe9;
          color: red;
        }

        .unfollow {
          width: 64px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          border-radius: 15px;
          font-size: 14px;
          background-color: #f7f7f7;
          color: #999;
        }
      }
    }
  }

  .similarVideoBox {
    padding: 5px 24px 0;

    .similarVideoTitle {
      font-size: 18px;
      font-weight: bold;
      padding: 5px;
      margin-bottom: 10px;
    }
  }

  .sheet {
    .add {
      position: absolute;
      left: 10px;
      top: 8px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      border: 1px solid #f2f2f2;
      padding: 0 10px;
    }

    .addOk {
      position: absolute;
      left: 10px;
      top: 8px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      border: 1px solid #f2f2f2;
      padding: 0 10px;
    }

    .input {
      background: none;
      outline: none;
      // border: 1px solid #ccc;
      border: none;
      padding: 0;
      font-size: 14px;
      color: #999;
      width: 215px;
      flex-shrink: 0;
      background-color: #f2f2f2;
      width: 333px;
      padding: 5px 10px;
      border-radius: 4px;
    }

    .input:focus {
      border: none;
    }

    .close {
      position: absolute;
      right: 15px;
      top: 13px;
    }
  }
}
</style>
